<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="18" :offset="0">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
      </el-col>
      <el-col :span="6" :offset="0">
        <el-button type="primary" @click="resetChecked">清空选择</el-button>
      </el-col>
    </el-row>
    <el-alert type="error" effect="light" show-icon :closable="false">
      <template slot='title'>
        <div>1、菜单根据选择添加，使用父菜单，请同时选择父级菜单。</div>
        <div>2、每个权限都应该添加公共接口菜单，否则会造成公告接口无权限。</div>
      </template>
    </el-alert>
    <el-tree class="filter-tree" :data="treeData" :props="defaultProps" accordion :filter-node-method="filterNode"
      ref="tree" show-checkbox node-key="id" :default-checked-keys="treeDefault" :default-expanded-keys="treeDefault"
      :check-strictly="true" v-loading="loading">
    </el-tree>
    <div class="center">
      <el-button type="danger" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="save" :loading="loading">保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {
    menuParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      loading: false,
      filterText: '',
      treeData: [],
      treeDefault: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created () {

  },
  mounted () {
    this.init()
    this.init1()
  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('sysMenuList', {
        requestType: 'get'
      })
      let menuList = []
      res.forEach(item => {
        // 处理数据
        if (item.parent) {
          item.parent_id = item.parent.id
          item.parent_name = item.parent.name
          item.parent_sort = item.parent.sort,
            item.label = item.name
        }
        menuList.push(item)
      })
      this.treeData = this.toTree(menuList, 'children', 'id', 'parent_id')
      this.loading = false
    },
    async init1 () {
      const res = await this.$http('sysRoleMenu', {
        requestType: 'get',
        role_id: this.menuParams.id
      })
      this.treeDefault = this.$util.arrsToArr(res, 'menu_id')
    },
    async save () {
      this.loading = true
      const res = await this.$http('sysRoleMenuUp', {
        menus: this.$refs.tree.getCheckedKeys(),
        role_id: this.menuParams.id
      })
      this.$tips.success(res.errmsg)
      this.loading = false
      this.cancel()
    },
    cancel () {
      this.$emit('cancel');
    },
    resetChecked () {
      this.$refs.tree.setCheckedKeys([]);
    },
    // 菜单遍历重组结构
    toTree (data, children_key, id_key, pid_key) {
      let child_key = children_key || 'children'
      let id = id_key || 'id'
      let pid = pid_key || 'pid'
      // 删除无用子节点
      data.forEach(item => {
        delete item[child_key]
      })
      // 定义map,给map赋值
      let map = {}
      data.forEach(item => {
        map[item[id]] = item
      })
      // 遍历处理
      let arr = []
      data.forEach(item => {
        // 定义父节点
        let parent = map[item[pid]]
        if (parent) {
          (parent[child_key] || (parent[child_key] = [])).push(item)
        } else {
          arr.push(item)
        }
      })
      return arr
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
  computed: {

  },
  watch: {
    'this.menuParams.id' (val) {
      if (val) {
        this.init1()
      }
    },
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
}
</script>
<style lang='scss' scoped>
</style>
